<template>
  <div>
    <el-card class="report" :shadow="shadowShow">
      <div slot="header" class="header">
        <span>审核报告</span>
        <div class="header_right">
          <img src="@/assets/img/order_qr.png" alt="" @click="reportQRHandle" />
          <img src="@/assets/img/order_ print.png" alt="" @click="reportPrintHandle" />
          <img src="@/assets/img/order_cancle.png" alt="" @click="reportcancleHandle" />
        </div>
      </div>
      <!-- 审核状态 -->
      <div class="report_status">
        <img src="@/assets/img/order_pass.png" alt="" />
        <span class="pass">数据审核报告—审核通过</span>
      </div>
      <!-- //医生信息 -->
      <el-row class="report_info">
        <el-col :span="12">
          <span>医生姓名：李医生</span>
        </el-col>
        <el-col :span="12">
          <span>{{ $t('data.data4') }}：{{ $t('add.add159') }}</span>
        </el-col>
      </el-row>
      <el-row class="report_info">
        <el-col :span="12">
          <span>{{ $t('institutionSetting.jigou14') }}：1589999999</span>
        </el-col>
        <el-col :span="12">
          <span>{{ $t('add.add130') }}：拒绝接单</span>
        </el-col>
      </el-row>
      <!-- 患者信息 -->
      <el-row class="report_title">
        <span>{{ $t('yulan.yulan37') }}</span>
      </el-row>
      <el-row class="report_info">
        <el-col :span="12">
          <span>患者姓名：xx</span>
        </el-col>
        <el-col :span="12">
          <span>{{ $t('data.data26') }}：xx</span>
        </el-col>
      </el-row>
      <el-row class="report_info">
        <el-col :span="12">
          <span>用户ID：xx</span>
        </el-col>
        <el-col :span="12">
          <span>性别：xx</span>
        </el-col>
      </el-row>
      <el-row class="report_info">
        <span>既往史：xx</span>
      </el-row>
      <el-row class="report_info">
        <span>过敏史：xx</span>
      </el-row>
      <el-row class="report_info">
        <span>口腔习惯：xx</span>
      </el-row>
      <el-row class="report_info">
        <span>备注：无</span>
      </el-row>
      <!-- 牙位 -->
      <el-row class="report_title">
        <span>牙位</span>
      </el-row>
      <el-row class="report_yaWei">
        <div class="yaWei_left">
          <img src="@/assets/img/login/bg_left.png" alt="" />
          <!-- <el-image :src="require('@/assets/img/login/bg_left.png')" fit="cover"></el-image> -->
        </div>
        <div class="yaWei_right">
          <div class="yaWei_separate_item">
            <img src="@/assets/img/login/bg_left.png" alt="" />
            <!-- <el-image :src="require('@/assets/img/login/bg_left.png')" fit="contain"></el-image> -->
            <span>{{ $t('add.add165') }}</span>
          </div>
          <div class="yaWei_separate_item">
            <img src="@/assets/img/login/bg_left.png" alt="" />
            <!-- <el-image :src="require('@/assets/img/login/bg_left.png')" fit="contain"></el-image> -->
            <span>{{ $t('add.add164') }}</span>
          </div>
        </div>
      </el-row>
      <!-- 审核报告 -->
      <el-row class="report_title">
        <span>审核报告</span>
      </el-row>
      <el-row class="report_data">
        <!-- //标题 -->
        <div class="report_data_header">
          <p>数据完整性(0)</p>
          <span>{{ $t('caseorder.anli63') }}</span>
        </div>
        <!-- 备注： -->
        <div class="report_data_mark">
          <p>备注1</p>
          <span
            >问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题描述问题问题描述问题描述问题描述问题描述问题描述描述。</span
          >

          <div class="report_data_img">
            <el-image
              class="order_preview_inner_img"
              style="width: 206px; height: 159px"
              :src="require('@/assets/img/login/bg_left.png')"
              fit="contain"
            />
            <el-image
              class="order_preview_inner_img"
              style="width: 206px; height: 159px"
              :src="require('@/assets/img/login/bg_left.png')"
              fit="contain"
            />
          </div>
        </div>
      </el-row>
      <!-- 底部按钮 -->
      <el-row class="report_data" style="display: flex; justify-content: flex-end">
        <el-button :size="tableButtonSize" @click="reportBackHandle()">返 回</el-button>
      </el-row>
    </el-card>

    <ReportPreview ref="ReportPreview" />
  </div>
</template>

<script>
import ReportPreview from './reportpreview.vue'; //
export default {
  name: 'BLZMasterReportresult',
  components: {
    ReportPreview,
  },
  data() {
    return {};
  },

  mounted() {},

  methods: {
    // 二维码展示
    reportQRHandle() {},
    // 打印
    reportPrintHandle() {
      this.ref.ReportPreview.dialogShow = true;
    },
    // 取消
    reportcancleHandle() {},
  },
};
</script>

<style lang="scss" scoped>
// 报告
.report {
  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;

    .header_right {
      position: relative;

      img {
        cursor: pointer;
        width: 16px;
        height: 16px;
      }

      img:nth-child(1) {
        margin-right: 20px;
      }

      img:nth-child(2) {
        margin-right: 40px;
      }
    }
  }

  //报告状态显示
  .report_status {
    display: flex;
    flex-direction: column;
    margin-bottom: 33px;
    align-items: center;

    img {
      margin-bottom: 10px;
      width: 44px;
      height: 44px;
    }

    .pass {
      font-size: 18px;
      font-weight: 500;
      line-height: 14px;
      color: #65aa37;
    }
  }

  .report_title {
    font-size: 14px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 20px;
    color: #333333;
    margin: 20px 0;
  }

  .report_info {
    span {
      font-size: 14px;
      font-weight: 400;
      line-height: 30px;
      color: #000000;
    }
  }

  .report_yaWei {
    display: flex;
    // justify-content: space-around;
    // width: 100%;
    height: 240px;

    .yaWei_left {
      background-color: red;
      width: 50%;

      // flex: 1;
      img {
        width: 100%;
        height: 100%;
      }
    }

    .yaWei_right {
      margin-left: 10px;
      width: 50%;
      flex: 1;
      display: flex;
      flex-wrap: wrap;

      .yaWei_separate_item {
        position: relative;
        overflow: hidden;
        width: 100%;

        img {
          position: absolute;
          left: 0;
          top: 0;
        }

        span {
          position: absolute;
          right: 0;
          top: 0;
          background: #e59740;
          border-radius: 0px 0px 0px 3px;
          padding: 4px 10px;
          font-size: 12px;
          font-weight: 400;
          color: #ffffff;
        }
      }

      .yaWei_separate_item:nth-child(1) {
        margin-bottom: 10px;
      }
    }
  }

  .report_data {
    .report_data_header {
      background-color: #f5f5f5;
      padding: 16px 24px;

      p {
        font-size: 14px;
        font-weight: 500;
        color: #333333;
      }

      span {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: #666666;
      }
    }

    .report_data_mark {
      p {
        line-height: 40px;
        font-size: 14px;
        font-weight: 500;
        color: #333333;
      }

      span {
        font-size: 14px;
        font-weight: 400;
        line-height: 22px;
        color: #333333;
      }

      .report_data_img {
        display: flex;
        margin: 16px;
      }
    }
  }
}
</style>
